<template>
  <div class="py-[8px]" v-for="(item, index) in list" :key="item" :class="{ side_top: index > 0 }">
    <div class="mb-[8px]">{{ item.name }}系统</div>
    <div class="flex flex-wrap gap-[8px] contentDrop">
      <div v-for="(it, ind) in item.sub" :key="it" class="content">
        <span @click="handleEdit(it.url)">{{ it.menu_name }}</span>
        <!-- <span  class="remove" >-</span
        > -->
        <span v-if="isEdit" class="remove" @click="handleDelete(it, ind, index)"><SvgIcon icon-class="state_yichu" /></span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus"
import SvgIcon from "@/components/SvgIcon/index.vue"
import Sortable from "sortablejs"
import { delQuickEntry } from "@/api/system/user.js"
import { watch } from "vue"
const router = useRouter()
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
})
const { data, isEdit } = toRefs(props)
const list = ref([])
watch(
  () => data.value,
  (val) => {
    if (val.length === 0) return
    list.value = val || []
  }
)
watch(
  () => isEdit.value,
  (val) => {
    if (val) {
      nextTick(() => {
        handleDrop()
      })
    }
  }
)
const sortList = ref({})
const handleDrop = () => {
  const containers = document.querySelectorAll(".contentDrop")
  const containerArray = Array.from(containers)
  // console.log("tbody", containerArray);
  containerArray.forEach((tbody, index) => {
    new Sortable(tbody, {
      animation: 180,
      delay: 0,
      onEnd: ({ newIndex, oldIndex }) => {
        if (newIndex === oldIndex) {
          return false
        }
        const rows = JSON.parse(JSON.stringify(list.value))
        const currRow = rows[index].sub.splice(oldIndex, 1)[0]
        rows[index].sub.splice(newIndex, 0, currRow)
        list.value[index].sub = []
        nextTick(() => {
          sortList.value[index] = rows[index].sub
          list.value[index].sub = rows[index].sub
        })
      },
    })
  })
}

const handleDelete = async (val, ind, index) => {
  try {
    let id = val.id
    const { code, message } = await delQuickEntry({ id })
    if (code != 200) return ElMessage.warning(message)
    // console.log("list", list.value, ind);
    list.value[index]["sub"].splice(ind, 1)
    // console.log("list", list.value);
    ElMessage.success("删除成功!")
  } catch (error) {}
  // console.log("delete");
}
const handleEdit = (url) => {
  if (isEdit.value) return
  router.push(url)
}

const clearSortList = () => {
  sortList.value = {}
}
defineExpose({
  clearSortList,
  sortList,
})
</script>
<style lang="scss" scoped>
.side_top {
  // border-top: 1px dashed #c3dbff;
  border-top: 1px dashed var(--base-border-color);
}
.content {
  position: relative;
  padding: 4px 18px;
  border-radius: 4px;
  border: 1px solid rgba(52, 135, 255, 0.12);
  background-color: var(--base-table-header-bg-color);
  cursor: pointer;
  font-size: 14px;
  // color: #333333;
  &:hover {
    // opacity: 0.8;
    background-color: var(--base-table-row-hover-bg-color);
  }
}

.remove {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 16px;
}
</style>
